Beginner's Guide to Responsive Images: How to Get Them Right

And note that in my example, the image’s natural dimensions are 2000px x 1333px but I’m choosing to display it at a maximum of 1000px.

Theoretically, I could do the above for every image on my page, and this would be a rudimentary and acceptable way to incorporate responsive images into my projects. But ideally, I’d like to take this to the next level and gain control over the image’s resolution and other factors, to improve performance and help with SEO, which I’ll discuss in the following sections.

In the simple CSS example above, I’m loading an image that’s about 1.44MB in size – even after I’ve used lossless compression to reduce the size. That’s not terrible on its own when viewed on a desktop, but it’s certainly not the size I want loaded on a small device, like a smartphone. This is where the srcset and sizes attributes come in handy.

The srcset attribute allows you to specify multiple image sizes in a single value. These will be the images that the browser or device will have access to under defined circumstances. The sizes attribute works along with srcset to tell the browser which of the images to choose.

Here’s an example that uses multiple versions of the leopard.png image from the previous example:

If you’ve never seen the srcset and sizes attributes before, that might seem confusing at first glance. I’ll break it all down so it’s relatively easy to grasp.

The srcset attribute accepts a comma-separated list of one or more strings. Each string contains:

In my example, I’ve included a width descriptor, which is the one you’ll see most often. I’ve included three different versions of the image: The large high-resolution version, along with one that’s 800px wide and another that’s 480px wide.

Notice when I used the width descriptor in the above example, the syntax is the width value immediately followed by a “w” (don’t use a “px” unit value!). For each of the width descriptors representing the images, I’m using the intrinsic width of the image in pixels. You can get the true size of any image in any of several different ways – by referencing its properties in your file system, a photo editor, or even in your browser or browser’s developer tools.

The sizes attribute only works along with the srcset attribute. You can use srcset alone (see the next section), but the most common way to use srcset is along with sizes.

The sizes attribute accepts a comma-separated list of one or more strings. Each string contains:

The slot value can be an absolute length like em or px or a viewport relative unit (e.g. vw). Notice in my example the slot values in the sizes attribute don’t exactly match the three width descriptors. Here is the code again:

The fact that the slot values don’t match exactly to the width descriptors is fine. In my case, I can break down the sizes value as:

The last string is a slot value alone, with no media condition. As mentioned, this ensures the browser will have something to display if none of the media conditions are met, working as a default.

You can view the example code in action using the CodePen demo below. Note that in this case, you’ll have to test on something that mimics different devices (like the DevTools in Chrome). You can also open the page using a variety of real devices to do a true test. For convenience, I’ve included a text overlay on each of the images so you can see which loads when you view the page.